<template>
  <a-modal
    v-model:open="props.detailVisible"
    :title="props.rowData.paramName"
    class="addStation"
    destroyOnClose
    :width="1000"
    :height="800"
    @cancel="cancel"
    centered
  >
    <br />
    <a-space direction="horizontal">
      日期选择
      <!--      :default-value="defaultDate"-->
      <a-date-picker
        format="YYYY-MM-DD"
        @change="onDateChange"
        v-model:value="submitData.defaultDate"
        value-format="YYYY-MM-DD"
        :allow-clear="false"
      ></a-date-picker>
      <a-button type="primary" :loading="loading" @click="listData"
        >查询</a-button
      >
      <a-icon type="<SwapOutlined />"></a-icon>
      <a-button @click="switchChart">
        <template #icon><SwapOutlined /></template>
      </a-button> </a-space
    ><br /><br />
    <a-space direction="horizontal" wrap>
      属性名：<span>{{ props.rowData.attrName }}</span> </a-space
    ><br /><br />
    <div class="tableContent">
      <a-table
        :data-source="dataList"
        :columns="columns"
        :pagination="false"
        bordered
        :scroll="{ x: 'max-content', y: 500 }"
        size="small"
        @resizeColumn="handleResizeColumn"
        v-show="!displayChart"
        class="pdDataTable"
      >
        <template></template>
      </a-table>
    </div>

    <!--    v-for="(chartData, index) in chartsData"-->
    <!--    :ref="(el) => (chartRefs[index] = el)"-->
    <!--    :key="index"-->
    <div ref="pdDataChart" class="chartContainer" v-show="displayChart" />
    <!--v-show="displayChart" -->
    <template #footer></template>
  </a-modal>
</template>
<script setup>
// 
import { getCurrentDate } from "@/utils/common"
import { chartOption } from "./chartOption"
import * as echarts from "echarts"
import moment from "moment"

const $api = inject("$api")
const props = defineProps({
  detailVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
})
const loading = ref(false)
const emits = defineEmits(["detail:detailVisible"])
const dataList = ref([])
const displayChart = ref(false)
const pdDataChart = ref(null)
const chartData = ref([])
const defaultDate = ref(getCurrentDate())
const submitData = ref({
  pdId: null,
  start: null,
  end: null,
  defaultDate: defaultDate.value,
})

onMounted(() => {
  submitData.value.start = submitData.value.defaultDate
  submitData.value.end = submitData.value.defaultDate
})

const initChart = () => {
  const chartInstance = echarts.init(pdDataChart.value)
  const powerChart = chartOption
  powerChart.xAxis.data = create(5)
  /* dataList.value.map((item) =>
    moment(item["dateTime"]).format("HH:mm:ss")
  ) */
  powerChart.series[0].data = powerChart.xAxis.data.map((time) => {
    const target = dataList.value.find((v) => v.dateTime.split(" ")[1] === time)
    return target ? target.value : null
  }) //dataList.value.map((item) => item["value"])
  chartInstance.setOption(powerChart)
}
//处理x轴
const create = (minute) => {
  var seconds = minute * 60
  let len = (60 * 24 * 60) / seconds //数组长度
  for (var i = 0, total = 0, newArr = []; i < len; i++) {
    var h = parseInt(total / 3600),
      min = parseInt((total % 3600) / 60)
    newArr.push(s(h) + ":" + s(min) + ":" + "00")
    total += seconds
  }
  return newArr
}
const s = (n) => {
  return n < 10 ? "0" + n : n
}
//-----------------------------------------------------------------------------------------------

watch(
  () => props.detailVisible,
  (val) => {
    if (val) {
      submitData.value.pdId = props.rowData.id
      submitData.value.defaultDate = defaultDate.value
      submitData.value.start = defaultDate.value
      submitData.value.end = defaultDate.value
      listData()
    }
  }
)

const onDateChange = (value, dateStr) => {
  submitData.value.start = dateStr
  submitData.value.end = dateStr
}

const cancel = () => {
  emits("detail:detailVisible", false)
  loading.value = false
  submitData.value.defaultDate = null
  submitData.value.start = null
  submitData.value.end = null
  submitData.value.pdId = null
  displayChart.value = false
  dataList.value = []
}

const listData = async () => {
  loading.value = true
  const params = {
    pdId: submitData.value.pdId,
    start: submitData.value.start,
    end: submitData.value.end,
  }
  const res = await $api.pdDataList(params)
  if (res && res.code === 0) {
    dataList.value = res.data
    if (displayChart) {
      initChart()
    }
  }
  loading.value = false
}
const switchChart = () => {
  displayChart.value = !displayChart.value
  initChart()
}

const columns = [
  {
    title: "时间点",
    dataIndex: "dateTime",
    key: "dateTime",
    width: "100px",
  },
  {
    title: "参数值",
    dataIndex: "value",
    key: "value",
    width: "100px",
  },
]

function handleResizeColumn(w, col) {
  col.width = w
}
</script>
<style lang="less" scoped>
.chartContainer {
  margin-bottom: 20px;
  width: 950px;
  height: 600px;
  background: #141414;
  border-radius: 4px;
}
.tableContent {
  width: 950px;
}
</style>
